<div class="full-width container has-tooltip">
  @if (label() || tooltip()) {
    <ix-label
      [label]="label()"
      [tooltip]="tooltip()"
      [ixTestOverride]="controlDirective.name || ''"
    ></ix-label>
  }

  <div class="input-container" [class.disabled]="disabledState">
    <mat-select
      [required]="required()"
      [compareWith]="compareWith()"
      [disabled]="disabledState"
      [multiple]="multiple()"
      [ixTest]="controlDirective.name"
      [canSelectNullableOptions]="true"
      [aria-label]="label() || ''"
      [(ngModel)]="value"
      (blur)="onTouch()"
      (ngModelChange)="onChange($event)"
    >
      <mat-select-trigger>
        {{ selectedLabel }}
      </mat-select-trigger>

      @if (multiple() && showSelectAll()) {
        <div
          class="select-all-checkbox"
          [ixTest]="[controlDirective.name, 'select-all']"
          (click)="toggleSelectAll(!selectAllState.checked)"
        >
          <ix-icon
            [name]="selectAllState.checked ? 'check_circle' : 'remove'"
          ></ix-icon>
          {{ 'Select All' | translate }}
        </div>
      }

      @if (opts$ | async; as opts) {
        @if (opts.length === 0) {
          <mat-option
            [value]="null"
            [disabled]="true"
            [ixTest]="[controlDirective.name, 'no-options']"
          >
            {{ 'No options' | translate }}
          </mat-option>
        }
        @if (opts.length > 0 && !multiple() && !required() && !hideEmpty()) {
          <mat-option
            [value]="emptyValue()"
            [ixTest]="[controlDirective.name, 'select']"
          >
            {{ emptyLabel() }}
          </mat-option>
        }
        @for (option of opts; track option.label) {
          <mat-option
            #ixOption
            matTooltipPosition="right"
            [value]="option.value"
            [disabled]="option.disabled"
            [ixTest]="[controlDirective.name, option.label]"
            [matTooltip]="option.hoverTooltip ? (option.hoverTooltip | translate) : ''"
            [attr.aria-label]="option.label | translate"
          >
            @if (multiple()) {
              <ix-icon
                [name]="ixOption.selected ? 'check_circle' : 'remove'"
              ></ix-icon>
            }
            {{ option.label | translate }}

            @if (option.tooltip) {
              <ix-tooltip
                class="option-tooltip"
                [header]="option.label | translate"
                [message]="option.tooltip | translate"
                (click)="onOptionTooltipClicked($event)"
              ></ix-tooltip>
            }
          </mat-option>
        }
      } @else {
        @if (hasErrorInOptions) {
          <mat-option [disabled]="true" [ixTest]="[controlDirective.name, 'options-not-loaded']">
            {{ 'Options cannot be loaded' | translate }}
          </mat-option>
        }
      }
    </mat-select>

    @if (isLoadingState) {
      <mat-progress-spinner
        class="loader"
        mode="indeterminate"
        [diameter]="15"
      ></mat-progress-spinner>
    }
  </div>

  @let control = controlDirective.control;
  @if (control) {
    <ix-errors [control]="control" [label]="label()"></ix-errors>
  }

  @if (hint()) {
    <mat-hint>{{ hint() }}</mat-hint>
  }
</div>
